<template>
  <div>
    <div class="u-flex-col u-col-center u-row-center">
      <div class="u-m-b-20 u-relative">
        <div
          class="u-absolute"
          :class="isRadiant(item.player_slot) ? 'dire' : 'radiant'"
          :style="{
            top: `${(width / 127) * (127 - (Number(item.y) - 64)) -
              (((width / 12) * (1600 / 850)) / 2)}px`,
            left: `${(width / 127) * (Number(item.x) - 64) -
              (((width / 12) * (1600 / 850)) / 2)}px`,
            width: `${(width / 12) * (1600 / 850)}px`,
            height: `${(width / 12) * (1600 / 850)}px`,
            zIndex: '11',
          }"
          v-for="item in obsList"
          :key="item.key"
        >
          <van-image
            :src="
              isRadiant(item.player_slot)
                ? 'https://www.opendota.com/assets/images/dota2/map/goodguys_observer.png'
                : 'https://www.opendota.com/assets/images/dota2/map/badguys_observer.png'
            "
            width="18"
            height="13.8"
          ></van-image>
        </div>
        <div
          class="u-absolute"
          :class="isRadiant(item.player_slot) ? 'dire' : 'radiant'"
          :style="{
            top: `${(width / 127) * (127 - (Number(item.y) - 64)) -
              ((width / 12) / 2)}px`,
            left: `${(width / 127) * (Number(item.x) - 64) -
              ((width / 12) / 2)}px`,
            width: `${width / 12}px`,
            height: `${width / 12}px`,
            zIndex: '11',
          }"
          v-for="item in senList"
          :key="item.key"
        >
          <van-image
            :src="
              isRadiant(item.player_slot)
                ? 'https://www.opendota.com/assets/images/dota2/map/goodguys_sentry.png'
                : 'https://www.opendota.com/assets/images/dota2/map/badguys_sentry.png'
            "
            width="18"
            height="13.8"
          ></van-image>
        </div>
        <DotaMap
          class="u-absolute"
          :width="`${width}px`"
          :maxWidth="`${width}px`"
        />
      </div>
    </div>
    <div class="u-p-20">
      <van-slider
        v-model="time"
        :max="timeMax"
        :min="timeMin"
        step="5"
        active-color="#ee0a24"
      >
        <template #button>
          <div class="custom-button">{{ timeValue }}</div>
        </template>
      </van-slider>
    </div>
  </div>
</template>
<script setup>
import DotaMap from "@/components/DotaMap/index";
import { formatSeconds } from "@/utils/index";
import { isRadiant } from "@/utils/dotaHelper";
import { computed, ref, defineProps, onUpdated } from "vue";
const props = defineProps({
  obsLog: {
    type: Array,
  },
  senLog: {
    type: Array,
  },
});
const obsList = computed(() => {
  return props.obsLog.filter((item) => {
    return (
      item.startTime <= time.value &&
      (!item.endTime || item.endTime >= time.value)
    );
  });
});
const senList = computed(() => {
  const list = props.senLog.filter((item) => {
    return (
      item.startTime <= time.value &&
      (!item.endTime || item.endTime >= time.value)
    );
  });
  return list;
});
const time = ref(0);
const timeMax = ref(3600);
const timeMin = ref(-10);
const timeValue = computed(() => formatSeconds(time.value));
const screenWidth =
  document.body.clientWidth > 550 ? 550 : document.body.clientWidth - 20;
const width = ref(screenWidth);
const getTime = ({ obsLog, senLog }) => {
  let min = 0;
  let max = 0;
  obsLog.forEach((log) => {
    if (log.startTime < min) {
      min = log.startTime;
    }
    if (log.startTime > max) {
      max = log.startTime;
    }
  });
  senLog.forEach((log) => {
    if (log.startTime < min) {
      min = log.startTime;
    }
    if (log.startTime > max) {
      max = log.startTime;
    }
  });
  timeMax.value = max;
  timeMin.value = min;
};
onUpdated(() => {
  getTime(props);
});
</script>
<style lang="scss" scoped>
.custom-button {
  width: 60px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}
.radiant {
  background: rgba(255, 171, 64, 0.3);
  border-radius: 50%;
  border: 2.5px solid rgb(255, 76, 76);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dire {
  background: rgba(255, 171, 64, 0.3);
  border-radius: 50%;
  border: 2.5px solid rgb(102, 187, 106);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
